<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i>表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>编辑器</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                Vue-Quill-Editor:基于Quill、适用于vue2的富文本编辑器。
                访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
            </div>
            <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
            <el-button class="editor-bth" type="primary" @click="submit">提交</el-button>
        </div>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    import { quillEditor } from 'vue-quill-editor'
    export default {
        name: 'Vueeditor',
        components: {
            quillEditor
        },
        data () {
            return {
                content:'',
                editorOption: {
                    placeholder: 'Hello, this is VueEditor please configure attribution of editorOption.'
                }
            }
        },
        methods: {
            // onEditorChange($event) 可以写成 onEditorChange(quile) 这里这样写是使用了对象的解构语法
            onEditorChange({ quill, html, text }) {
                // 富文本框改变触发的事件  (还有聚焦、失去焦点、ready等事件)
                // quill是富文本框对象、 html是生成的标签、 text是写的内容
                // console.log(html)
            },
            submit(){
                console.log(this.content);
                this.$message.success('提交成功！');
            }
        }
    }
</script>